<template>
  <a-table
    :row-selection="{
      checkStrictly: false,
      selectedRowKeys: selectedRowKeys
    }"
    :columns="columns"
    :data-source="dataSource"
    :loading="loading"
    bordered
    :pagination="{ pageSize: 2, page: 1, total: 3 }"
    size="small"
  >
    <!--  表头插槽  -->
    <!--    <template #headerCell="{ column }">-->
    <!--      <template v-if="column.key === 'openTime'">-->
    <!--        <span>-->
    <!--          {{ column.title }}-->
    <!--        </span>-->
    <!--      </template>-->
    <!--    </template>-->
    <!-- 表单插槽 -->
    <template v-if="column.dataIndex === 'operate'">
      <div class="smart-table-operate">
        <a-button
          type="link"
          class="handle"
          size="small"
          style="margin-right: 12px"
        >
          上移
        </a-button>
        <a-button
          type="link"
          class="handle"
          size="small"
          v-show="index !== tableData.length - 1"
        >
          下移</a-button
        >
      </div>
    </template>
    <template #bodyCell="{ column, record }">
      <template v-if="column.key === 'openTime'">
        <a>
          {{ $filters.dateFilter(record.openTime) }}
        </a>
      </template>
      <template v-if="column.key === 'avatar'">
        <a-avatar :size="35" :src="record.avatar"> </a-avatar>
      </template>
      <template v-else-if="column.key === 'role'">
        <span>
          <a-tag
            v-for="tag in record.role"
            :key="tag"
            :color="
              tag.title === '超级管理员'
                ? 'blue'
                : tag.length > 5
                ? 'green'
                : 'red'
            "
          >
            {{ tag.title }}
          </a-tag>
        </span>
      </template>
    </template>
  </a-table>
</template>
<script setup>
import { ref, defineProps } from 'vue'

defineProps({
  dataSource: {
    type: Array,
    default: () => []
  },
  columns: {
    type: Array,
    default: () => []
  }
})

// 选择列表
const selectedRowKeys = ref([])
// 加载动画
const loading = ref(false)
</script>

<style scoped lang="scss"></style>
